情報処理Ⅱ　授業概要

授業の目的

• プログラミングの楽しさを実感する．

• 論理的思考力に基づいた造形表現ができる能力を養う．

• 数と画像の関係を理解する．

授業で学ぶ技術

Processingを用いて以下のプログラム技術の基礎を学ぶ

• 演算

• 制御文

• データ構造

• 関数

• 再帰

• クラス

また，論理的に画像・映像を設計する手続き的な造形表現を学ぶ．

授業の進め方

• Processingを用いた作品制作を通し，プログラミングの基本概念を理解する．

• 一回の授業内で3～5つ程度に分けた演習をこなす．

教材について

• Teamsホームページ

  • Teams授業チーム内の「ホームページ」から

  • 教材Webページや課題ページなどの授業に必要なリンクがまとめられている．

  • 講師への質問チャットもこのページの講師アイコンから

• 情報処理Ⅱ授業Webページ

  • このページのこと

  • 授業で学習する内容がまとめられている．

• 情報処理Ⅱ課題ページ

  • 各課題の提出要件や参考作品を記載している．

  • 提出はここではなくTeamsの課題提出フォームからおこなう．

授業時間外に発生する作業について

• 課題提出のため，授業時間外の作業時間が発生する．

• 他の授業の課題や自主制作時間などを考慮し，各自スケジュールをしっかり組むこと．

課題について

• Teams授業チーム内の「課題」から提出する．

  • 詳細は出題時に説明する．

授業時間外の質問について

• 基本的にはチャットを送ってください．

• できるだけ早急に対応しますが，遅れる場合もあり．

必要機材

授業用のデータを持ち運ぶストレージを用意してください．

• 大学のオンライン個人ストレージまたはUSBメモリなど．

• プログラムデータはテキストデータであるため，データ容量は小さめ．

評価について

出席数と提出された課題を元に，総合的に判断．

第１回：Processing入門

Processing導入

Processingの特徴

• アーティスト＆デザイナー向け

  • スケッチブック（フォルダ全体）

  • スケッチ（プログラム）

• あらゆることが容易で初歩に最適

  • ウィンドウに迅速にグラフィックが描画できる．

  • インストールやコンパイルなどに手間がかからない．

• プログラミング言語Javaがベース

  • 一般的なプログラミング学習に向いている．

• 多様なOSに対応し，フリーダウンロード，オープンソース

アプリケーションの実行

演習室ではデスクトップにProcessingアイコンがあるのでそれを実行する．

エディタ

ここにプログラムを描く．

プログラムの実行と停止

最初のサンプルプログラム

サンプルプログラム

灰色の背景に緑の円と青の正方形を描画するプログラム

このプログラムの実行結果

演習１：プログラムをコピーして実行する．

Processingのエディタウィンドウへサンプルプログラムをコピー＆ペーストして実行してみる．

以下のプログラムをコピーするとよい．

xxxxxxxxxx
size( 400, 200 );              // Window Size

background( 100, 100, 100 );   // BG color

fill( 0, 255, 0 );             // Blue
circle( 120, 100, 80 );

fill( 0, 0, 255 );             // Green
square( 240, 60, 80 );

プログラムとは

サンプルプログラムを元にプログラムの基本を解説する．

プログラムはテキストデータ

プログラムは複数の「文」Statement からできている．

セミコロン(;)によって１つの文として区切る．

プログラム実行時，基本的には文が上から下へ，順番に逐次実行されていく．

コメント：プログラムに影響を与えないメモ

文（Statement）の要素

このプログラムの各文は以下の２種類の要素で成り立っている．

命令（command）

• Processingにあらかじめ用意されている命令

• 青文字と()の部分

引数（引数）（parameters）

• 命令に渡す追加情報（色や大きさ，座標の値）

• 引数が複数ある場合は間をカンマ,で区切る．

最初のプログラムの命令

最初のサンプルプログラムを読み解くために必要な基礎知識や命令を紹介する．

また，命令の項の最後に記載する「例」のプログラムはコピーしてProcessingで実行することができる．

Processingの座標系について

• スクリーン水平方向がＸ座標，垂直方向がＹ座標方向となる．

• Processingでは左上を原点（0, 0）とし，右下に向かって座標値が大きくなる．

  • 下図は横680pixel, 縦480pixel の例

画面サイズを決める．

size()

構文

size( 水平方向のピクセル数, 垂直方向のピクセル数 )

説明

• 画面（描画領域）の大きさを指定する．

• プログラム冒頭に一度だけ記述する．

引数

水平方向と垂直方向の大きさをピクセル単位で記述する．

例

水平方向:600, 垂直方向:200 の画面を設定する．

xxxxxxxxxx
size( 600, 200 );

https://processing.org/reference/size_.html

背景に色を付ける．

background()

構文

background( R値, G値, B値 )

説明

指定した色でスクリーンの全体の塗りつぶし描画を行う．

引数

• RGB値それぞれを0~255の間で決定する．

• この命令を使用しない場合の背景のデフォルトカラーはライトグレイ（204）．

例

スクリーンを R:225, G:204, B:0 で塗りつぶす．

xxxxxxxxxx
background( 255, 204, 0 );

https://processing.org/reference/background_.html

正方形を描画する

square()

構文

square( 左上角X座標値, 左上角Y座標値, 正方形の一辺の長さ )

説明

正方形を描画する．

引数

• 正方形の左上角の点の座標値を記述する．

• 正方形は縦と横の長さが等しいため，長さの記述は一つのみ．

例

X:120, Y:100の座標に一辺の長さが220の正方形を描画する．

xxxxxxxxxx
size(400, 400);

square(120, 100, 220);

https://processing.org/reference/square_.html

正円を描画する

circle()

構文

circle( 中心X座標値, 中心Y座標値, 円の直径 )

説明

正円を描画する．

引数

• 正円の中心点の座標値．

• 円の直径（半径ではないことに注意）

例

X:224, Y:184を中心点とした直径220の円を描画する．

xxxxxxxxxx
size( 400, 400 );

circle( 224, 184, 220 );

https://processing.org/reference/circle_.html

図形の塗りつぶし色を設定する

fill()

構文

fill( R値, G値, B値 )

説明

• 図形の塗りつぶし色の変更を行う．

• 図形描画を行う命令の前に記述する必要がある．

• 色を変更する毎にfill()を用いる必要がある．

引数

RGB値それぞれを0~255の間で決定する．

例

xxxxxxxxxx
fill( 204, 102, 0 );
rect( 30, 20, 55, 55 );

https://processing.org/reference/fill_.html

アルゴリズム

各命令の構文や動作を覚えていくとプログラムの実行手順を読み取れるようになっていく． このようなプログラムの実行手順をアルゴリズムという．

プログラミングは，アルゴリズムを考え記述することが重要となる．

演習２：サンプルプログラムの数値を変更する．

最初のサンプルプログラムの引数（数値）部分を書き換え，気に入った画像を出力してみる．

プログラムを実行し，気に入った画像が出力されるまで書き換えを繰り返す．

作例

xxxxxxxxxx
size( 480, 270 );

background( 10, 10, 40 );

fill( 240, 220, 100 );
circle( 70, 20, 200 );        // moon

fill( 30, 20, 105 );
square( 200, 120, 500 );      // building

演習３：サンプルプログラムの命令文を増やす．

演習２で作成したプログラムを元に，独自に命令文を追加して気に入った画像を出力する．

• 後の図形描画命令によってカンバスが上書きされていくことに注意．

• 座標値として，マイナスの値やスクリーンより大きな値も記述できる．

作例

moonの暗い部分の正円は，中心点がスクリーン外なのでY座標値がマイナスとなっていることに注目．

xxxxxxxxxx
size( 480, 270 );

background( 10, 10, 40 );

fill( 240, 220, 100 );
circle( 70, 20, 200 );        // moon

fill( 160, 130, 80 );
circle( 55, -5, 195 );        // moon( dark side )


fill( 30, 20, 105 );
square( 200, 120, 500 );      // building

fill( 10, 4, 60 );
square( 250, 150, 500 );      // building( dark side )

プログラムファイルの保存

作成したプログラムは資産になるので，有用なものはできるだけ保存すること．

ファイルの保存方法

新規にファイルを作成しない場合は「保存」を行い上書きをする．

Processingのデータ形式

ファイル形式（拡張子）: .pde

• スケッチとも呼ばれる．

• ファイルを保存すると，同名のフォルダが自動で作成され，その中にスケッチが保存される．

• フォルダごと保管すること．

• ファイル名に日本語は使用不可．

• スケッチが格納された同名のフォルダをスケッチブックとも呼ぶ．

• スケッチ(.pde)がフォルダ(スケッチブック)に格納されているファイル構造を壊さないよう注意． （スケッチブックだけを移動させる等しないこと）

演習４：プログラムを保存する．

演習３で作成したプログラムを保存する．

• 適当な名前を付ける．

• つけた名前のpdeファイルが同名のフォルダに入っていることを確認する．

デ情ロゴに使う命令

デ情ロゴ作成に挑戦する．

楕円を描画する．

ellipse()

構文

ellipse( 中心X座標, 中心Y座標, 楕円の横幅, 楕円の高さ )

説明

楕円を描画する．

引数

• 楕円の中心点のX,Y座標値

• 楕円の横幅，高さ

例

xxxxxxxxxx
size(400, 400);

ellipse( 160, 190, 300, 200 );

https://processing.org/reference/ellipse_.html

図形の塗りつぶしを半透明にする．

fill()

構文

fill( R値, G値, B値, Alpha値 )

説明

RGB後に不透明（アルファ）値を追加することで，塗色を半透明にできる．

引数

Alpha値もそれぞれを0~255の間で決定する．

0: 完全透明 ↔ 255 : 不透明

例

xxxxxxxxxx
fill(204, 102, 0);
rect(15, 10, 55, 55);

fill(0, 102, 200, 200);  // hantoumei blue
rect(30, 20, 55, 55);

図形の塗りつぶしをグレースケールで設定する．

fill()

構文

fill( Gray値 )

fill( Gray値, Alpha値 )

説明

RGB値の代わりにGray値を記述することで，グレースケールの塗色を指定できる． background()でも使える． アルファ値を使うこともできる．

引数

Gray値も0~255の間で決定する．

0: Black ↔ 255 : White

例

xxxxxxxxxx
background( 10 );          // BG color

fill( 153 );               // Square color
square( 30, 30, 40 );

線を消去する．

noStroke()

構文

noStroke()

説明

図形のアウトラインの線を描画しないようにする．

引数

なし

例

xxxxxxxxxx
noStroke();
square( 30, 20, 55 );

https://processing.org/reference/noStroke_.html

演習５：楕円とマスクを使った描画

楕円を使って黒い三日月状の模様を作る．

• 大きさや形は自由

• マスクのための楕円はグレースケール値：204 の塗色にするとよい．

• 難しいと感じたら作例を元にアレンジを加える．

作例

xxxxxxxxxx
size( 400, 400 );

noStroke();

fill( 0 );
ellipse( 200, 200, 300, 200 );

fill( 204 );
ellipse( 215, 195, 280, 170 );

演習６：デ情ロゴを作る．

• デ情ロゴは楕円図形の組み合わせで作ることができる．（非公式）

下絵を読み込む

1. 以下のプログラムを作り，ファイルを保存する．

   Code

   xxxxxxxxxx
   size( 400, 400 );
   
   PImage img;
   img = loadImage("dinfo_logo.jpg");
   background(img);
   

2. JPGファイル「dinfo_logo.jpg」をTeamsの「ホームページ」からダウンロードする．

3. ダウンロードしたJPGファイル「dinfo_logo.jpg」をpdeファイルのあるフォルダにコピーする．

   

4. プログラムを実行し，背景にJPGファイルが表示されることを確認する．

   

大きな楕円部分を作る．

• 半透明の楕円（緑の部分）を描画する．

• 数値を調整し，下絵の一番大きな黒い楕円に合わせる．

• 塗り色はfill( 0, 255, 0, 160 );を指定しておく．

• 適当なコメントも付ける．

xxxxxxxxxx
size( 400, 400 );

PImage img;
img = loadImage("dinfo_logo.jpg");
background(img);

// daen
fill( 0, 255, 0, 160 );
ellipse( 200, 230, 260, 200 );

小さな楕円マスク部分を作る．

• 中央上の小さな白抜き用の楕円を描画する．

• 数値を調整し，下絵の白い楕円に合わせる．

• 塗り色はfill( 204, 160 );を指定しておく．

• 適当なコメントも付ける．

xxxxxxxxxx
size( 400, 400 );

PImage img;
img = loadImage("dinfo_logo.jpg");
background(img);

// daen
fill( 0, 255, 0, 160 );
ellipse( 200, 230, 260, 200 );

// daen mask
fill( 204, 160 );
ellipse( 198, 204, 90, 60 );